<template>
  <div>
    <el-row>
      <el-col>
        <ul class="tag-list">
          <li class="tag-item" v-for="(item, index) of listValue" :key="index">{{item.realName}}({{item.userName}})</li>
        </ul>
        <div v-if="showClear" class="clear-tag" @click.stop="clearAll"><fa-icon class="fa-close" /></div>
      </el-col>
    </el-row>
    <div class="top-panel__box">
      <el-form :model="dataForm" ref="dataForm" inline size="small" onsubmit="return false">
        <el-form-item>
          <el-input clearable placeholder="请输入姓名/工号/机构搜索员工" v-model="dataForm.freeCondition"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="seachList">
            <fa-icon class="fa-search" />查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row class="table-top">
      <el-table :row-key="getRowKey" :data="dataList" v-loading="tableLoading" tooltip-effect="light" @select="handleSelectionChange" @select-all="selectAllEvent" class="tc-table" size="small" ref="tableRef">
        <el-table-column type="selection" width="55" fixed="left" :selectable="checkSelect" :reserve-selection="true"></el-table-column>
        <template v-for="(column, index) in USER_HEAD_LIST">
          <el-table-column :prop="column.prop" :label="column.label" :key="index" :width="column.width" :show-overflow-tooltip="true" />
        </template>
      </el-table>
      <el-row class="pagination-top">
        <pagination :pageNum.sync="dataForm.pageNum" :curSizes.sync="dataForm.pageSize" :total="total" @getList="getList" />
      </el-row>
    </el-row>
    <el-row class="btn-box">
      <el-button type="" @click="close" size="small">取消</el-button>
      <el-button type="primary" @click="submit" size="small">
        <fa-icon class="fa-check" />确定</el-button>
    </el-row>
  </div>
</template>

<script>
import api from '../api'
import { CONSTANT_OBJ } from '@/utils/constant'
import { mapState } from 'vuex'
// 分派受理人
export const USER_HEAD_LIST = [
  { prop: 'realName', label: '姓名' },
  { prop: 'userName', label: '工号' },
  { prop: 'organizationName', label: '机构' },
  { prop: 'roles', label: '职务' }
]
export default {
  props: {
    valueList: Array
  },
  data () {
    return {
      USER_HEAD_LIST,
      tableLoading: false,
      showClear: false,
      dataForm: {
        freeCondition: '',
        pageNum: 0,
        pageSize: 10
      },
      dataList: [],
      selectedList: '',
      total: 0,
      listValue: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 查询列表
    getList (val) {
      console.log('查人', this.dataForm)
      this.dataForm.pageNum = val || this.dataForm.pageNum
      this.tableLoading = true
      api.queryAllUserList(this.dataForm).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          let roles = data.list.map(ele => {
            if (ele.roleList) {
              let roleNames = ele.roleList.map(val => {
                return val.roleName
              })
              ele.roles = roleNames && roleNames.length > 1 ? roleNames.join('/') : roleNames.join('')
            } else {
              ele.roles = ''
            }
            return ele
          })
          this.dataList = roles || []
          if (this.valueList && this.valueList.length > 0) {
            this.showClear = true
            this.initCheck(roles)
          }
          this.total = parseInt(data.total) || 0
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    initCheck (rows) {
      this.listValue = [...this.valueList]
      let ids = this.valueList.map(ele => ele.userName)
      rows.forEach(ele => {
        if (ids.includes(ele.userName)) {
          console.log(ele)
          this.$refs.tableRef.toggleRowSelection(ele, true)
        }
      })
    },
    handleSelectionChange (selection, row) {
      let temp = [...this.listValue]
      let res = temp.filter(ele => ele.userName === row.userName)
      console.log(row, '选中用户数据')
      if (res.length > 0) {
        let result = temp.filter(ele => ele.userName !== row.userName)
        this.listValue = [...result]
      } else {
        this.listValue.push(row)
      }
      this.showClear = selection.length > 0
    },
    selectAllEvent (selection) {
      this.listValue = [...selection]
    },
    getRowKey (row) {
      return row.userName
    },
    submit () {
      let data = this.listValue
      // console.log(data, '提交')
      // if (data.length === 0) {
      //   this.$message({
      //     message: '请选择成员',
      //     type: 'warning'
      //   })
      //   return false
      // }
      this.$emit('updataSuccess', data)
    },
    seachList () {
      this.getList(1)
    },
    checkSelect (row) {
      return row.userStatus !== 'FROZEN' && row.userStatus !== 'CLOSE'
    },
    close () {
      this.$emit('close', false)
    },
    clearAll () {
      this.$refs.tableRef.clearSelection()
      this.listValue = []
      this.showClear = false
    }
  },
  computed: {
    ...mapState({
      dicts: state => state.common.dicts
    })
  }
}
</script>

<style lang="less">
.tag-list{
  width: 90%;
  min-height: 40px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px 0;
  margin-bottom: 10px;
  .tag-item{
    display: inline-block;
    box-sizing: border-box;
    padding: 2px 10px;
    font-size: 12px;
    border: 1px solid #DCDFE6;
    margin: 0 5px 5px 5px;
    line-height: 22px;
    border-radius: 4px;
  }
}
.btn-box{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.clear-tag{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 99;
  cursor: pointer;
}
</style>
